<template>
    <div class="dashboard">
      <div class="page-header">
        <h2>控制台</h2>
        <div class="header-actions">
          <el-button type="primary" @click="refreshData">
            <i class="el-icon-refresh"></i> 刷新数据
          </el-button>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
          ></el-date-picker>
        </div>
      </div>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card shadow="hover" class="data-card">
            <div class="data-card-content">
              <div class="data-card-icon warning">
                <i class="el-icon-warning"></i>
              </div>
              <div class="data-card-info">
                <div class="data-card-title">库存预警</div>
                <div class="data-card-value">{{ dashboardData.warningCount }}</div>
                <div class="data-card-compare" :class="dashboardData.warningTrend > 0 ? 'up' : 'down'">
                  <i :class="dashboardData.warningTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                  <span>{{ Math.abs(dashboardData.warningTrend) }}% 较上周</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card shadow="hover" class="data-card">
            <div class="data-card-content">
              <div class="data-card-icon inbound">
                <i class="el-icon-box"></i>
              </div>
              <div class="data-card-info">
                <div class="data-card-title">本月入库</div>
                <div class="data-card-value">{{ dashboardData.inboundCount }}</div>
                <div class="data-card-compare" :class="dashboardData.inboundTrend > 0 ? 'up' : 'down'">
                  <i :class="dashboardData.inboundTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                  <span>{{ Math.abs(dashboardData.inboundTrend) }}% 较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card shadow="hover" class="data-card">
            <div class="data-card-content">
              <div class="data-card-icon outbound">
                <i class="el-icon-sell"></i>
              </div>
              <div class="data-card-info">
                <div class="data-card-title">本月出库</div>
                <div class="data-card-value">{{ dashboardData.outboundCount }}</div>
                <div class="data-card-compare" :class="dashboardData.outboundTrend > 0 ? 'up' : 'down'">
                  <i :class="dashboardData.outboundTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                  <span>{{ Math.abs(dashboardData.outboundTrend) }}% 较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-card shadow="hover" class="data-card">
            <div class="data-card-content">
              <div class="data-card-icon product">
                <i class="el-icon-goods"></i>
              </div>
              <div class="data-card-info">
                <div class="data-card-title">商品总数</div>
                <div class="data-card-value">{{ dashboardData.productCount }}</div>
                <div class="data-card-compare" :class="dashboardData.productTrend > 0 ? 'up' : 'down'">
                  <i :class="dashboardData.productTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                  <span>{{ Math.abs(dashboardData.productTrend) }}% 较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="chart-row">
        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>库存趋势</span>
              <el-radio-group v-model="inventoryChartType" size="small" @change="handleInventoryChartTypeChange">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="quarter">季</el-radio-button>
              </el-radio-group>
            </div>
            <div class="chart-container" ref="inventoryTrendChart"></div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>库存状态分布</span>
            </div>
            <div class="chart-container" ref="inventoryStatusChart"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="chart-row">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>热门商品</span>
              <el-select v-model="hotProductsType" size="small" @change="handleHotProductsTypeChange">
                <el-option label="按销量" value="sales"></el-option>
                <el-option label="按库存周转" value="turnover"></el-option>
              </el-select>
            </div>
            <div class="hot-products-container">
              <el-table :data="hotProducts" style="width: 100%" :show-header="false">
                <el-table-column width="50">
                  <template slot-scope="scope">
                    <div class="rank-tag" :class="scope.$index < 3 ? 'top-rank' : ''">
                      {{ scope.$index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <div class="hot-product-item">
                      <el-image :src="scope.row.image" style="width: 40px; height: 40px" fit="contain"></el-image>
                      <div class="hot-product-info">
                        <div class="hot-product-name">{{ scope.row.name }}</div>
                        <div class="hot-product-sku">{{ scope.row.sku }}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="100" align="right">
                  <template slot-scope="scope">
                    <div class="hot-product-value">
                      {{ hotProductsType === 'sales' ? scope.row.sales : scope.row.turnover }}
                      <span class="hot-product-unit">{{ hotProductsType === 'sales' ? '件' : '次/月' }}</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>入库出库统计</span>
              <el-radio-group v-model="ioChartType" size="small" @change="handleIOChartTypeChange">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
            </div>
            <div class="chart-container" ref="ioChart"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="chart-row">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>最近预警</span>
              <el-button type="text" @click="viewAllWarnings">查看全部</el-button>
            </div>
            <el-table :data="recentWarnings" style="width: 100%">
              <el-table-column prop="image" label="图片" width="80">
                <template slot-scope="scope">
                  <el-image 
                    style="width: 50px; height: 50px" 
                    :src="scope.row.image" 
                    fit="contain"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="sku" label="SKU编码" width="150"></el-table-column>
              <el-table-column prop="name" label="SKU名称" min-width="200" show-overflow-tooltip></el-table-column>
              <el-table-column label="库存状态" width="150">
                <template slot-scope="scope">
                  <div class="stock-status">
                    <div class="stock-numbers">
                      <span class="current-stock">{{ scope.row.stock }}</span>
                      <span class="stock-separator">/</span>
                      <span class="min-stock">{{ scope.row.minStock }}</span>
                    </div>
                    <el-tag :type="getStockStatusType(scope.row.stockStatus)" size="small">
                      {{ getStockStatusText(scope.row.stockStatus) }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="lastUpdate" label="最后更新" width="170"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="handleInbound(scope.row)">入库</el-button>
                  <el-button size="mini" type="warning" @click="handlePurchase(scope.row)">采购</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  
  export default {
    name: 'DashboardView',
    data() {
      return {
        loading: false,
        dateRange: [
          new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toISOString().substr(0, 10),
          new Date().toISOString().substr(0, 10)
        ],
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        dashboardData: {
          warningCount: 219,
          warningTrend: -15,
          inboundCount: 1258,
          inboundTrend: 23,
          outboundCount: 986,
          outboundTrend: 18,
          productCount: 1254,
          productTrend: 5
        },
        inventoryChartType: 'week',
        inventoryTrendChart: null,
        inventoryStatusChart: null,
        inventoryTrendData: {
          week: {
            dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            sufficient: [820, 832, 901, 934, 1290, 1330, 1320],
            warning: [120, 132, 101, 134, 90, 230, 210],
            critical: [60, 72, 71, 74, 60, 50, 40],
            outOfStock: [20, 22, 21, 24, 30, 20, 10]
          },
          month: {
            dates: Array.from({length: 30}, (_, i) => `${i+1}日`),
            sufficient: Array.from({length: 30}, () => Math.floor(Math.random() * 500 + 800)),
            warning: Array.from({length: 30}, () => Math.floor(Math.random() * 100 + 100)),
            critical: Array.from({length: 30}, () => Math.floor(Math.random() * 40 + 40)),
            outOfStock: Array.from({length: 30}, () => Math.floor(Math.random() * 20 + 10))
          },
          quarter: {
            dates: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            sufficient: [820, 832, 901, 934, 1290, 1330, 1320, 1250, 1100, 950, 900, 850],
            warning: [120, 132, 101, 134, 90, 230, 210, 180, 160, 140, 130, 120],
            critical: [60, 72, 71, 74, 60, 50, 40, 45, 50, 55, 60, 65],
            outOfStock: [20, 22, 21, 24, 30, 20, 10, 15, 20, 25, 30, 35]
          }
        },
        hotProductsType: 'sales',
        hotProducts: [
          {
            id: 1,
            sku: 'SKU001',
            name: 'NVIDIA RTX 3060显卡',
            image: 'https://via.placeholder.com/100',
            sales: 256,
            turnover: 5.2
          },
          {
            id: 2,
            sku: 'SKU002',
            name: 'AMD Ryzen 5800X处理器',
            image: 'https://via.placeholder.com/100',
            sales: 198,
            turnover: 4.8
          },
          {
            id: 3,
            sku: 'SKU003',
            name: '三星980 Pro 1TB SSD',
            image: 'https://via.placeholder.com/100',
            sales: 175,
            turnover: 6.1
          },
          {
            id: 4,
            sku: 'SKU004',
            name: '罗技G502鼠标',
            image: 'https://via.placeholder.com/100',
            sales: 152,
            turnover: 3.9
          },
          {
            id: 5,
            sku: 'SKU005',
            name: '海盗船K70键盘',
            image: 'https://via.placeholder.com/100',
            sales: 143,
            turnover: 2.7
          },
          {
            id: 6,
            sku: 'SKU006',
            name: '华硕TUF Gaming显示器',
            image: 'https://via.placeholder.com/100',
            sales: 128,
            turnover: 1.8
          },
          {
            id: 7,
            sku: 'SKU007',
            name: '金士顿32GB内存条',
            image: 'https://via.placeholder.com/100',
            sales: 112,
            turnover: 4.2
          },
          {
            id: 8,
            sku: 'SKU008',
            name: '微星B550主板',
            image: 'https://via.placeholder.com/100',
            sales: 98,
            turnover: 3.5
          }
        ],
        ioChartType: 'week',
        ioChart: null,
        ioData: {
          week: {
            dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            inbound: [120, 132, 101, 134, 90, 230, 210],
            outbound: [220, 182, 191, 234, 290, 330, 310]
          },
          month: {
            dates: Array.from({length: 30}, (_, i) => `${i+1}日`),
            inbound: Array.from({length: 30}, () => Math.floor(Math.random() * 150 + 100)),
            outbound: Array.from({length: 30}, () => Math.floor(Math.random() * 200 + 150))
          }
        },
        recentWarnings: [
          {
            id: 1,
            sku: 'SKU001',
            name: 'NVIDIA RTX 3060显卡',
            category: '电子产品',
            stock: 3,
            minStock: 5,
            stockStatus: 'critical',
            linkedProducts: 3,
            lastUpdate: '2023-05-11 11:30:15',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 2,
            sku: 'SKU002',
            name: 'AMD Ryzen 5800X处理器',
            category: '电子产品',
            stock: 0,
            minStock: 3,
            stockStatus: 'outOfStock',
            linkedProducts: 2,
            lastUpdate: '2023-05-10 09:15:22',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 3,
            sku: 'SKU003',
            name: '三星980 Pro 1TB SSD',
            category: '电子产品',
            stock: 4,
            minStock: 5,
            stockStatus: 'warning',
            linkedProducts: 4,
            lastUpdate: '2023-05-09 16:45:30',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 4,
            sku: 'SKU004',
            name: '罗技G502鼠标',
            category: '电子产品',
            stock: 2,
            minStock: 10,
            stockStatus: 'critical',
            linkedProducts: 5,
            lastUpdate: '2023-05-08 14:20:45',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 5,
            sku: 'SKU005',
            name: '海盗船K70键盘',
            category: '电子产品',
            stock: 8,
            minStock: 10,
            stockStatus: 'warning',
            linkedProducts: 3,
            lastUpdate: '2023-05-07 10:05:18',
            image: 'https://via.placeholder.com/100'
          }
        ]
      }
    },
    mounted() {
      this.initCharts()
    },
    methods: {
      refreshData() {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.$message.success('数据已刷新')
          this.initCharts()
        }, 1000)
      },
      handleDateChange() {
        this.refreshData()
      },
      initCharts() {
        this.initInventoryTrendChart()
        this.initInventoryStatusChart()
        this.initIOChart()
      },
      initInventoryTrendChart() {
        if (this.inventoryTrendChart) {
          this.inventoryTrendChart.dispose()
        }
        
        const chartDom = this.$refs.inventoryTrendChart
        this.inventoryTrendChart = echarts.init(chartDom)
        
        const data = this.inventoryTrendData[this.inventoryChartType]
        
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['充足', '警告', '紧急', '缺货']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: data.dates
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '充足',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data.sufficient,
              itemStyle: {
                color: '#67C23A'
              }
            },
            {
              name: '警告',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data.warning,
              itemStyle: {
                color: '#E6A23C'
              }
            },
            {
              name: '紧急',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data.critical,
              itemStyle: {
                color: '#F56C6C'
              }
            },
            {
              name: '缺货',
              type: 'line',
              stack: 'total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data.outOfStock,
              itemStyle: {
                color: '#909399'
              }
            }
          ]
        }
        
        this.inventoryTrendChart.setOption(option)
        
        window.addEventListener('resize', () => {
          this.inventoryTrendChart.resize()
        })
      },
      initInventoryStatusChart() {
        if (this.inventoryStatusChart) {
          this.inventoryStatusChart.dispose()
        }
        
        const chartDom = this.$refs.inventoryStatusChart
        this.inventoryStatusChart = echarts.init(chartDom)
        
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['充足', '警告', '紧急', '缺货']
          },
          series: [
            {
              name: '库存状态',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1035, name: '充足', itemStyle: { color: '#67C23A' } },
                { value: 120, name: '警告', itemStyle: { color: '#E6A23C' } },
                { value: 65, name: '紧急', itemStyle: { color: '#F56C6C' } },
                { value: 34, name: '缺货', itemStyle: { color: '#909399' } }
              ]
            }
          ]
        }
        
        this.inventoryStatusChart.setOption(option)
        
        window.addEventListener('resize', () => {
          this.inventoryStatusChart.resize()
        })
      },
      initIOChart() {
        if (this.ioChart) {
          this.ioChart.dispose()
        }
        
        const chartDom = this.$refs.ioChart
        this.ioChart = echarts.init(chartDom)
        
        const data = this.ioData[this.ioChartType]
        
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['入库', '出库']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.dates
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '入库',
              type: 'bar',
              data: data.inbound,
              itemStyle: {
                color: '#67C23A'
              }
            },
            {
              name: '出库',
              type: 'bar',
              data: data.outbound,
              itemStyle: {
                color: '#F56C6C'
              }
            }
          ]
        }
        
        this.ioChart.setOption(option)
        
        window.addEventListener('resize', () => {
          this.ioChart.resize()
        })
      },
      handleInventoryChartTypeChange() {
        this.initInventoryTrendChart()
      },
      handleHotProductsTypeChange() {
        // 切换热门商品排序方式
        if (this.hotProductsType === 'sales') {
          this.hotProducts.sort((a, b) => b.sales - a.sales)
        } else {
          this.hotProducts.sort((a, b) => b.turnover - a.turnover)
        }
      },
      handleIOChartTypeChange() {
        this.initIOChart()
      },
      viewAllWarnings() {
        this.$router.push('/inventory/warning')
      },
      handleInbound(row) {
        this.$message.info(`准备为 ${row.name} 入库`)
      },
      handlePurchase(row) {
        this.$message.info(`准备为 ${row.name} 创建采购单`)
      },
      getStockStatusType(status) {
        const types = {
          sufficient: 'success',
          warning: 'warning',
          critical: 'danger',
          outOfStock: 'info'
        }
        return types[status] || 'info'
      },
      getStockStatusText(status) {
        const texts = {
          sufficient: '充足',
          warning: '警告',
          critical: '紧急',
          outOfStock: '缺货'
        }
        return texts[status] || '未知'
      }
    }
  }
  </script>
  
  <style scoped>
  .dashboard {
    padding: 20px;
  }
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .page-header h2 {
    margin: 0;
    font-size: 22px;
    color: #303133;
  }
  .header-actions {
    display: flex;
    gap: 10px;
  }
  .chart-row {
    margin-top: 20px;
  }
  .data-card {
    height: 120px;
    margin-bottom: 20px;
  }
  .data-card-content {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .data-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-right: 15px;
    margin-left: 10px;
  }
  .data-card-icon.warning {
    background-color: rgba(230, 162, 60, 0.1);
    color: #E6A23C;
  }
  .data-card-icon.inbound {
    background-color: rgba(103, 194, 58, 0.1);
    color: #67C23A;
  }
  .data-card-icon.outbound {
    background-color: rgba(245, 108, 108, 0.1);
    color: #F56C6C;
  }
  .data-card-icon.product {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409EFF;
  }
  .data-card-info {
    flex: 1;
  }
  .data-card-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
  }
  .data-card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 5px;
  }
  .data-card-compare {
    font-size: 12px;
    display: flex;
    align-items: center;
  }
  .data-card-compare.up {
    color: var(--danger-color);
  }
  .data-card-compare.down {
    color: var(--success-color);
  }
  .chart-card {
    margin-bottom: 20px;
  }
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-container {
    height: 300px;
  }
  .hot-products-container {
    height: 300px;
    overflow-y: auto;
  }
  .rank-tag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
  }
  .rank-tag.top-rank {
    background-color: var(--primary-color);
    color: white;
  }
  .hot-product-item {
    display: flex;
    align-items: center;
  }
  .hot-product-info {
    margin-left: 10px;
    flex: 1;
  }
  .hot-product-name {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 3px;
  }
  .hot-product-sku {
    font-size: 12px;
    color: var(--text-secondary);
  }
  .hot-product-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
  }
  .hot-product-unit {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: 2px;
  }
  .stock-status {
    display: flex;
    flex-direction: column;
  }
  .stock-numbers {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  .current-stock {
    font-weight: bold;
    font-size: 16px;
  }
  .stock-separator {
    margin: 0 5px;
    color: #909399;
  }
  .min-stock {
    color: #909399;
  }
  </style> 